<template>
  <div class="home">
    <p>{{title}}</p>
    <TitleVh :title="title" @lookDetail="lookDetail"/>
    <div class="alert" v-show="bigImg!==''" @click="lookDetail('')">
      <div>
        <img :src="bigImg" alt="" />
      </div>
    </div>

    <div>
      <div>计算器</div>
      <input type="number" v-model="number1">
      <Select :value="symbol" @change="sum">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
      </Select>
      <input type="number" v-model="number2">
      <span>=</span>
      <span>{{result}}</span>
    </div>
    
  </div>
</template>

<script lang="ts">
/* eslint-disable */
import { computed, onMounted, reactive, toRefs, watch } from 'vue';
import TitleVh from '../components/TitleVh.vue'


interface state {
  title: string,
  bigImg:string,
  symbol: string,
  result: number,
  number1: string,
  number2: string
}
const state:state = reactive({
  title: '父组件默认标题',
  bigImg: '',
  symbol: '+',
  // result: computed(()=>parseInt(state.number1) + parseInt(state.number2)), // 计算属性监听计算
  result: 0,
  number1: '0',
  number2: '0'
})

export default  {
  name: 'Home',
  components: {
    TitleVh
  },
  setup() {
    onMounted(()=>{
      state.title = '声明周期'
    })

    function lookDetail(img:string) {
      console.log('chufa')
      state.bigImg = img
    }

    // 监听数字1，2的变化计算值
    watch([()=>state.number1,()=>state.number2],()=>{
      switch(String(state.symbol)){
        case '+':
        return state.result = parseInt(state.number1) + parseInt(state.number2);
        case '-':
        return state.result = parseInt(state.number1) - parseInt(state.number2);
        case '*':
        return state.result = parseInt(state.number1) * parseInt(state.number2);
        case '/':
        return state.result = parseInt(state.number1) / parseInt(state.number2)
        case '%':
        return state.result = parseInt(state.number1) % parseInt(state.number2);
        default:
          break
      }
    })

    /**
     * 切换计算符号
     * @param e 计算符号
     */
    function sum(e:any) {
      state.symbol = e.target.value
      console.log(e.target.value)
      switch(String(e.target.value)){
        case '+':
          return state.result = parseInt(state.number1) + parseInt(state.number2);
          case '-':
          return state.result = parseInt(state.number1) - parseInt(state.number2);
          case '*':
          return state.result = parseInt(state.number1) * parseInt(state.number2);
          case '/':
          return state.result = parseInt(state.number1) / parseInt(state.number2)
          case '%':
          return state.result = parseInt(state.number1) % parseInt(state.number2);
          default:
            break
      }
    }

    return {
      ...toRefs(state),
      lookDetail,
      sum
    }
  }
}
</script>

<style lang="scss" scoped>
  .home {
    p {
      color: red;
      line-height: 50px;
      width: 100%;
      height: 50px;
      background: pink;
    }
  }
  .alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      width: 100%;
      height: max-content;
      position: relative;
      animation: mask linear 1s;
      button {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -80px;
      }
    }
    img {
      width: 80%;
      height: max-content;
    }
  }

  @keyframes mask {
    0% {
      transform:scale(0);
    }
    70% {
      transform:scale(1);
    }
    80% {
      transform:scale(1.2);
    }
    100% {
      transform:scale(1);
    }
  }
</style>
